<!--审核任务 -->
<template>
  <a-drawer
    title="审核任务"
    :width="1100"
    :visible="drawerVisible"
    :maskClosable="drawMaskClosable"
    :body-style="{ paddingBottom: '80px' }"
    @close="closeApplyComplete"
  >
    <div class="first">{{ taskName }}</div>
    <div class="basicAttr">
      <div class="attr">基本属性</div>
      <div v-if="messageList.length !== 0">
        <div class="messageContent" v-for="(item, index) in messageList" :key="index">
          <div v-for="item1 in item.items" class="message_de" :key="item1.id">
            <detailMessage :attrList="item1"></detailMessage>
          </div>
        </div>
      </div>
      <a-empty v-else description="暂无数据" class="nodata"/>
    </div>
    <div class="deliverable">
      <div class="attr">交付物</div>
      <taskTable :table-data="tableData" :load-visible="loadingVisible" table-name="待审核任务"></taskTable>
    </div>
    <div class="completeContent">
      <div class="attr">完成说明</div>
      <a-row :gutter="20">
        <a-col :span="12">
          <div class="completeContent_div">
            <div class="attrName">完成百分比:</div>
            <div class="attrValue">{{ perc }}%</div>
          </div>
        </a-col>
        <a-col :span="12">
          <div class="completeContent_div">
            <div class="attrName" style="">任务实际完成工期（天）:</div>
            <div class="attrValue">{{ days }}</div>
          </div>
        </a-col>
      </a-row>
      <a-row :gutter="20">
        <a-col :span="24">
          <div class="completeContent_div">
            <div class="attrName">完成情况说明:</div>
            <div class="attrValue" style="width: 900px;position: relative">{{ cumDescription }}</div>
          </div>
        </a-col>
      </a-row>
    </div>
    <div class="process" v-if="action==='审核任务' && dataStatus !== '已完成'">
      <div class="attr">流程处理</div>
      <bottom-describe
        ref="describeTask"
        :radioData="radioArr"
        :selectData="selectArr"
        @radioChange="radioChange"
        @modelValue="modelValue"
        @onSubmit="onSubmit"
        class="bottomBox"
      >
      </bottom-describe>
    </div>
    <div class="footer">
      <a-button :style="{ marginRight: '8px' }" @click="closeApplyComplete">
        取消
      </a-button>
      <a-button type="primary" @click="onSubmit">
        确认
      </a-button>
    </div>
  </a-drawer>
</template>
<script>
import detailMessage from "@/components/singlePage/detailMessage";
import taskTable from "./comp/taskTable.vue";
import bottomDescribe from "@/components/processCommon/approveProcess/bottomFrom";
import {getAttributeGroup, getDeliverableList, getLastResourceHour, verifyActivity} from "@api/todoPage";
import _ from "lodash";
export default {
  name: "examineTask",
  components: {detailMessage, taskTable, bottomDescribe},
  props: {
    drawerVisible_p: {
      type: Boolean,
      default: false
    },//是否展示抽屉
    oid: {
      type: String,
      default: 'OR:com.pisx.pmgt.project.PIProject:1080235'
    },//任务id
    taskName: {
      type: String,
      default: '产品定义评审'
    },//任务名称
    assignmentOid: {
      type: String,
      default: 'OR:com.pisx.pmgt.assignment.PIResourceAssignment:1684958'
    },
    dataStatus: {
      type: String,
      default: '已完成'
    },
    action: {
      type: String,
      default: ''
    },//当点击”操作“时显示详情；点击”任务名称“，显示详情+申请完成
    drawMaskClosable: {
      type: Boolean,
      default: false
    },//点击蒙层是否允许关闭
  },
  data() {
    return {
      drawerVisible: this.drawerVisible_p,
      messageList: [],
      tableData: [],
      radioArr: [
        {
          routing: 1,
          lable: "通过"
        },
        {
          routing: 2,
          lable: "驳回"
        }
      ],
      selectArr: ["同意", "不同意"],
      // textAreaValue: "",
      radioInfo: "",//单选框选中的值
      loadingVisible: false,
      cumDescription: '',//情况说明
      perc: null,//完成百分比
      days: 0,//实际工期
    };
  },
  watch: {
    drawerVisible_p(val) {
      this.drawerVisible = val;
    }
  },
  mounted() {
    this.getInfo()
    this.getDeliverableData()
    this.getLastResourceHourB()
  },
  methods: {
    closeApplyComplete() {
      this.$emit("closeDraw");
    },
    dateOnChange() {
    },
    radioChange(val) {
      if (val === 1) {
        this.radioInfo = true;
      } else if (val === 2) {
        this.radioInfo = false;
      }
    },
    // 点击弹框确认过后，添加内容到下拉框
    modelValue(val) {
      this.selectArr.push(val);
    },
    /*// 点击下拉框事件
    selectChange(val) {
      this.textAreaValue = val;
    },*/
    //提交审核
    onSubmit() {
      if (this.dataStatus === '已完成' || this.action != '审核任务') {
        this.$emit("closeDraw");
      } else {
        if (this.radioInfo !== false && this.radioInfo !== true) {
          this.$message.error('请选择操作！')
        } else {
          let parm = {
            "assignmentOid": this.assignmentOid,
            "pass": this.radioInfo,
            // "description": this.textAreaValue
            "description": this.$refs.describeTask.textAreaValueInput
          }
          // console.log(this.$refs.describeTask.textAreaValueInput)
          verifyActivity(parm).then(res => {
            if (res.data && res.status === 200) {
              if (res.data && res.data.success) {
                this.$message.success('审核成功！')
                this.$store.commit('commitApplyAdd')//刷新抽屉中的数据
                this.$emit("closeDraw");
              } else {
                this.$message.error(res.data.message)
              }
            } else {
              this.$message.error('接口失败！')
            }
          })
        }
      }
    },
    //获取任务基本信息
    getInfo() {
      let parms = {
        // oid: "OR:com.pisx.pmgt.project.PIProject:1080235"
        oid: this.oid
      }
      getAttributeGroup(parms).then(res => {
        // console.log(res.data[0].rows)
        if (res && res.status === 200) {
          if (res.data && res.data.success) {
            if (res.data.data[0] && res.data.data[0].rows && res.data.data[0].rows.length > 0) {
              this.messageList = res.data.data[0].rows
            } else {
              this.messageList = []
            }
          } else {
            this.messageList = []
            this.$message.error(res.data.message)
          }
        } else {
          this.$message.error('接口失败')
        }
      })
    },
    //获取交付物表格数据
    getDeliverableData() {
      this.loadingVisible = true
      // console.log('获取交付物表格数据--oid:', this.oid)
      let parms = {
        // oid: "OR:com.pisx.pmgt.plan.PIPlanActivity:1364663"
        oid: this.oid
      }
      getDeliverableList(parms).then(res => {
          this.tableData = []
          // console.log(res)
          if (res && res.status === 200) {
            if (res.data && res.data.success) {
              if (res.data.data && res.data.data.length > 0) {
                this.tableData = res.data.data
                let status = res.data.data.map(rec => {
                  return rec['deliverable.targetStatus']
                })
                // let status =['已完成','已完成','已发放C']
                this.deliverableStatus = _.isMatch(status, ['已完成'])
                console.log('status：', status)
                this.loadingVisible = false
                // console.log('this.deliverableStatus：',this.deliverableStatus)
              } else {
                this.tableData = []
                this.loadingVisible = false
              }
            } else {
              this.loadingVisible = false
              this.$message.error(res.data.message)
            }
          } else {
            this.loadingVisible = false
            this.$message.error('接口失败')
          }
        }
      )
    },
    //获取上一次汇报工时的记录
    getLastResourceHourB() {
      let parm = {
        "resources": [
          {
            "assignmentOid": this.assignmentOid
          }
        ]
      }
      getLastResourceHour(parm).then(res => {
        if (res && res.status === 200) {
          if (res.data && res.data.success == true) {
            if (res.data.data && res.data.data.length > 0) {
              this.perc = res.data.data[0].completePercent
              this.days = res.data.data[0].completeTime
              this.cumDescription = res.data.data[0].comment
            } else {
              this.perc = ''
              this.days = ''
              this.cumDescription = ''
            }
          }else{
            this.$message.error(res.data.message)
          }
        } else {
          this.$message.error('接口失败')
        }
      })
    },
  }
};
</script>
<style lang="less" scoped>
/deep/ .ant-drawer-body {
  padding: 10px 20px;
}
.attr {
  font-size: 16px;
  color: #333;
  padding: 10px 0;
  font-weight: 550;
}
.first {
  color: #333;
  font-size: 20px;
  font-weight: 550;
}
.basicAttr {
  padding: 10px 0;
  .message {
    padding: 5px 20px 5px 0;
  }
}
.deliverable {
  padding: 20px 0 10px;
}
.completeContent {
  padding: 20px 0 10px;
  .completeContent_div {
    margin-bottom: 40px;
    width: 100%;
    //display: flex;
    //justify-content: flex-start;
    //align-items: center;
    .attrName {
      //width: 100px;
      height: 20px;
      float: left;
      color: #666;
    }
    .attrValue {
      color: #333;
      float: left;
      margin-left: 20px;
    }
  }
}
.process {
  padding: 10px 0;
  .bottomBox {
    margin: 10px 0;
    /deep/ .ant-input {
      width: 600px !important;
    }
  }
}
.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e9e9e9;
  padding: 10px 16px;
  background: #fff;
  text-align: right;
  z-index: 1;
}
.messageContent {
  margin-bottom: 20px;
  display: flex;
  .message_de {
    width: 25%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    .messageList {
      min-width: 25%;
      margin: 5px 0;
      font-size: 14px;
      text-align: right;
      display: flex;
      justify-content: flex-start;
    }
  }
}
.nodata {
  padding: 10px 0 20px 0;
}
</style>